<template>
	<view class="container">
		<view class="box">
			<view class="borders">
			  <!-- <canvas canvas-id="qrcode" style="width: 136px; height: 136px;"></canvas> -->
			  <yan-qr :filePath.sync="filePath" :text="mobile" :margin="20" />
			</view>
			<view class="c-60 flex-center">{{ mobile | filterMobile }}</view>
			<view class="font-24 c-a4">付款码每20秒动态刷新一次</view>
		</view>
		<view class="flex-center m-t-40">
			<view class="font-24 c-a4">温馨提示:会员卡只用于展示给收银员识别会员身份和付款，请勿将会员支付码及数字截屏发送给他人</view>
			
		</view>
		
		<view class="flex-center m-t-100">
			<view class="trade" @click="goLink()" v-if="tradePath">交易明细</view>
		</view>
	</view>
</template>

<script>
	import uQRCode from "@/common/js/uqrcode.js";
	export default {
		data() {
			return {
				mobile: '',
				qrCodeSrc: "",
				qrcodeSize: 136,
				filePath: "",
				tradePath: "", //交易明细跳转路径
			}
		},
		filters: {
		  filterMobile(value) {
		    return value.substr(0, 3) + "****" + value.substr(7, 4);
		  },
		},
		watch: {
		  filePath() {
		    console.log(this.filePath);
		  },
		},
		onLoad() {
			if(uni.getStorageSync('token')) {
				this.mobile = uni.getStorageSync('token').mobile;
			}
			this.getTradePath();
		},
		
		methods: {
			goLink() {
			  this.$util.redirectTo(this.tradePath);
			  // this.$util.redirectTo("/pages/balanceDetails/balanceDetails");
			  this.close();
			},
			//获取交易明细配置路径
			getTradePath() {
			  this.$api.sendRequest({
			    url: "/api/site/trade",
			    data: {},
			    success: (res) => {
			      if (res.code == 0) {
			        this.tradePath = res.data.path;
			      }
			    },
			  });
			},
			generateQRCode() {
			  if (!this.mobile) {
			    uni.showToast({
			      title: "手机号为空，无法生成二维码",
			      icon: "none",
			    });
			    return;
			  }
			
			  // 确保canvas已准备好
			  this.$nextTick(() => {
			    console.log("开始生成二维码...", uQRCode);
			    uQRCode.make({
			      canvasId: "qrcode",
			      text: this.mobile,
			      size: this.qrcodeSize,
			      margin: 10,
			      success: (res) => {
			        this.qrCodeSrc = res;
			        console.log("二维码生成成功:", res);
			      },
			      fail: (err) => {
			        console.error("二维码生成失败:", err);
			      },
			    });
			  });
			},
		}
	}
</script>

<style lang="scss" scoped>
.box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	margin: 80rpx 60rpx;
	border-radius: 20rpx;
}

.borders {
    display: flex;
    align-items: center;
    justify-content: center;
    // width: 382rpx;
    // height: 382rpx;
    // border-radius: 27rpx;
    // border: 1px solid red;
    // image {
    //   width: 313rpx;
    //   height: 313rpx;
    // }
  }
  .trade {
    color: $color-title2;
    text-decoration: underline;
  }
</style>
